import React from 'react';
import Taro from '@tarojs/taro';
import {connect} from 'react-redux';
import {View, Button, Image, RichText, ScrollView} from '@tarojs/components';
import {AtActionSheet} from 'taro-ui';

import * as T from '../../types';
import actions from '../../actions/index';
import {store2Props} from '../../selectors';
import {OSS_PATH_PREFIX, OSS_BASE_PATH_PREFIX} from '../../constant';
import PageLoading from '../../../../common/PageLoading';

type IInfoProps = T.IProps & T.IInfoProps;

import './StrategyModal.less';
import 'taro-ui/dist/style/components/modal.scss';
import 'taro-ui/dist/style/components/action-sheet.scss';
// @ts-ignore
@connect<Partial<IInfoProps>, T.IInfoState>(store2Props, actions)
/**
 * 会员模态框
 */
export default class StrategyModal extends React.Component<Partial<IInfoProps>, T.IInfoState> {
  // 使用state值
  constructor(props) {
    super(props);
    this.state = {
      pics: {
        loadingIcon: OSS_BASE_PATH_PREFIX + '/gameLoadingWhite.png',
        emptyIcon: OSS_BASE_PATH_PREFIX + '/empty.png',
        closeIcon: OSS_PATH_PREFIX + '/strategyClose.png',
      },
      empty: {
        text: '玩法升级中',
      },
      loading: {
        status: false,
        text: '',
        style: {},
      },
      ActionSheet: {
        title: '欧气攻略',
      },
    };
  }
  componentWillReceiveProps(nextProps: Readonly<Partial<IInfoProps>>, nextContext: any): void {
    // if (nextProps.visible == true && this.props.visible == false && nextProps.main.status.loadingGameInfo == true) {
    if (nextProps.visible == true && this.props.visible == false) {
      this.setState({
        loading: {
          ...this.state.loading,
          status: true,
        },
      });
    }

    // if (nextProps.main.status.loadingGameInfo == false && this.props.main.status.loadingGameInfo == true) {
    //   this.setState({
    //     loading: {
    //       ...this.state.loading,
    //       status: false
    //     }
    //   })
    // }
  }

  /**
   * 渲染
   * @returns
   */
  render() {
    let {
      visible,
      actions: {action},
      main: {gameInfo},
    } = this.props;
    const {
      loading: {status},
    } = this.state;
    return (
      <AtActionSheet isOpened={visible} className="strategyModal" onClose={this.handleCancel}>
        {this.renderCloseIcon()}
        {this.renderTitle()}
        {
          // status ? this.renderLoadingContent() :
          gameInfo && gameInfo.text ? this.renderContent() : this.renderEmptyContent()
        }
      </AtActionSheet>
    );
  }

  /**
   * 关闭按钮
   */
  renderCloseIcon() {
    const {pics} = this.state;

    return (
      <View className="modalClose" onClick={this.handleCancel}>
        <Image src={pics.closeIcon} className="closeIcon" />
      </View>
    );
  }

  /**
   * 点击取消
   */
  handleCancel = () => {
    this.props.onCancel();
  };

  /**
   * 渲染空
   */
  renderEmptyContent() {
    const {
      pics: {emptyIcon},
      empty: {text},
    } = this.state;

    return (
      <View className="emptyContent">
        <Image src={emptyIcon} className="emptyIcon" />
        <View className="emptyExtraTitle">{text}</View>
      </View>
    );
  }

  /**
   * 渲染加载动画
   * @returns
   */
  renderLoadingContent() {
    const {
      pics: {loadingIcon},
      loading: {status, text, style},
    } = this.state;
    return (
      <View className="loagingContent">
        <PageLoading style={style} />
      </View>
    );
  }

  /**
   * 渲染标题
   */
  renderTitle() {
    const {
      ActionSheet: {title},
    } = this.state;
    return <View className="strategyModalTitle">{title}</View>;
  }

  /**
   * 渲染富文本信息
   * @returns
   */
  renderContent() {
    const {
      main: {gameInfo},
    } = this.props;
    return (
      <ScrollView scrollY className="richText">
        <RichText nodes={gameInfo.text} space="nbsp"></RichText>
        {gameInfo.text ? <View style={{height: '10vh'}}></View> : <></>}
      </ScrollView>
    );
  }
}
